<template>
	<view class="coin-detail">
		<view class="coin-order-list">
			<scroll-view scroll-y="true" :scroll-with-animation="true" :enable-back-to-top="true"
				@scrolltolower="reachBottom" :style="{ height:(headerHeight - tabsHeight - 64)  + 'px'}">
				<view class="header-statistical" v-if="params.tabsMenuCurrent == 0">
					<view class="">
						<view class="sub-title">总收款</view>
						<view class="turnover">{{statistic.turnover}}元</view>
						<view class="exception-number">含退款:{{statistic.refundTotalAmount}}元</view>
					</view>
					<u-line direction="col" color="#FFFFFF4D" length="122rpx"></u-line>
					<view class="">
						<view class="sub-title">线上收款</view>
						<view class="turnover">{{statistic.turnoverOnLine}}元</view>
						<view class="exception-number-not"></view>
					</view>
					<u-line direction="col" color="#FFFFFF4D" length="122rpx"></u-line>
					<view class="">
						<view class="sub-title">线下收款</view>
						<view class="turnover">{{statistic.turnoverOffline}}元</view>
						<view class="exception-number-not"></view>
					</view>
				</view>
				<template v-if="orderList.length > 0">
					<view class="coin-order-item" v-for="(item, index) of orderList" :key="index">
						<view class="order-details">
							<view class="order-time-box">
								<view class="text-30" v-if="item.gmtPayment">
									{{Date.parse(item.gmtPayment) | date('yyyy/mm/dd hh:MM:ss')}}
								</view>
								<view v-else></view>
								<view class="order-time-box text-38">
									<image v-if="channelTypeEnum.WX == item.channelType" class="image-32"
										:src="`${staticFileUrl}/image/order/wechat.png`"></image>
									<image v-else-if="channelTypeEnum.ALI == item.channelType" class="image-32"
										:src="`${staticFileUrl}/image/order/payTreasure.png`"></image>
									<image
										v-else-if="channelTypeEnum.BANKNOTE_MACHINE == item.channelType || channelTypeEnum.COIN_BOX == item.channelType"
										class="image-32" :src="`${staticFileUrl}/image/order/cash.png`"></image>
									<text class="price">{{item.totalAmount}}元</text>
								</view>
							</view>
							<view class="left-box">
								<view class="information-bar margin-top-30"
									:class="item.orderItemList && item.orderItemList.length > 0 ? 'information-bar-item' : ''">
									<view class="information-title">购买商品：</view>
									<view class="information-text">
										<view v-if="item.orderItemList && item.orderItemList.length > 0">
											<view class="item" v-for="(orderItem,orderItemIndex) in item.orderItemList"
												:key="orderItemIndex">
												<view class="item-name">
													<text>{{orderItem.name}}</text><text class="u-p-l-10"> *
														{{orderItem.num}}</text>
												</view>
												<view
													v-if="item.deviceTypeId==deviceTypeEnum.VENDING_MACHINE || item.deviceTypeId==deviceTypeEnum.SCREEN_VENDING_MACHINE || item.deviceTypeId==deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE">
													<text
														v-if="orderItem.shipmentStatus==orderShipmentStatusEnum.READY_FOR_SHIPMENT"
														class="payment-successful">待出货</text>
													<text
														v-else-if="orderItem.shipmentStatus==orderShipmentStatusEnum.SUCCESS"
														class="payment-successful">出货成功</text>
													<text
														v-else-if="orderItem.shipmentStatus==orderShipmentStatusEnum.FAILURE"
														class="coin-failure">出货失败</text>
													<text
														v-else-if="orderItem.shipmentStatus==orderShipmentStatusEnum.PARTIAL_FAILURE"
														class="coin-failure coin-color-orange">{{orderItem.shipmentFailureNum}}个出货失败</text>
												</view>
											</view>
										</view>
										<view v-else> {{item.body}} </view>
									</view>
								</view>
								<view class="details" v-if="$deviceTypeEnum.VENDING_MACHINE == item.deviceTypeId ||
										$deviceTypeEnum.SCREEN_VENDING_MACHINE == item.deviceTypeId ||
										$deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE == item.deviceTypeId" @click="navOrderInfo(item.id)">
									<view style="color: #6072FF;font-size: 30rpx;">详情</view>
									<u-icon name="arrow-right" color="#2979ff" size="18"></u-icon>
								</view>
							</view>
							<view class="information-bar" v-if="item.storeName">
								<view class="information-title">交易场地：</view>
								<view class="information-text">{{item.storeName}}</view>
							</view>

							<view class="order-time-box" style="margin-top:20rpx" v-if="item.deviceNo">
								<view class="order-time-box">
									<view class="information-title">设备类型：</view>
									<view class="information-text">
										<text v-if="!$u.test.isEmpty(item.remarkName)">{{item.remarkName}}_</text>
										<text>{{item.deviceNo}}</text>
										<text v-if="!$u.test.isEmpty(item.deviceAlias)">_{{item.deviceAlias}}号</text>
										<text>_{{item.deviceTypeName}}</text>
									</view>
								</view>
							</view>
							<view class="information-bar">
								<view class="information-title">平台单号：</view>
								<view class="information-text">{{item.outTradeNo}}</view>
							</view>
							<view class="information-bar">
								<view class="information-title" v-if="item.payChannelOrderNo">
                  <text v-if="item.mchType == 5">
                    抖音订单编号：
                  </text>
                  <text v-else-if="item.mchType == 6">
                    美团订单编号：
                  </text>
                  <text v-else>
                    交易单号：
                  </text>
                </view>
								<view class="information-text">{{item.payChannelOrderNo?item.payChannelOrderNo:''}}
								</view>
							</view>
							<view class="order-time-box">
								<view class="information-bar">
									<view class="information-title">订单状态：</view>
									<view class="information-text">
										<text class="payment-successful"
											v-if="orderStatusEnum.WAIT == item.status">待支付</text>
										<text class="payment-successful"
											v-else-if="orderStatusEnum.SUCCESS == item.status">支付成功</text>
										<text class="payment-successful"
											v-else-if="orderStatusEnum.PART_REFUND == item.status">部分退款成功</text>
										<text class="payment-successful color-6072FF"
											v-else-if="orderStatusEnum.FULL_FERUND == item.status">退款成功</text>
										<text class="coin-failure coin-color-orange"
											v-else-if="orderStatusEnum.REFUNDING == item.status">退款中</text>
										<text class="payment-successful"
											v-else-if="orderStatusEnum.REFUND_FAIL == item.status">退款失败</text>
										<template
											v-if="item.deviceTypeId==deviceTypeEnum.VENDING_MACHINE || item.deviceTypeId==deviceTypeEnum.SCREEN_VENDING_MACHINE || item.deviceTypeId==deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE">
											<text v-if="item.shipmentStatus==orderShipmentStatusEnum.READY_FOR_SHIPMENT"
												class="payment-successful">待出货</text>
											<text v-else-if="item.shipmentStatus==orderShipmentStatusEnum.SUCCESS"
												class="payment-successful">出货成功</text>
											<text v-else-if="item.shipmentStatus==orderShipmentStatusEnum.FAILURE"
												class="coin-failure">出货失败</text>
											<text
												v-else-if="item.shipmentStatus==orderShipmentStatusEnum.PARTIAL_FAILURE"
												class="coin-failure coin-color-orange">部分出货失败</text>
										</template>
										<text v-if="item.reordStatus">
											<text v-if="item.deviceTypeId==deviceTypeEnum.SUPER_MONEY_CHANGER ||
												item.deviceTypeId==deviceTypeEnum.CONVERTIBLE_CURRENCY_MACHINE">
												<text class="coin-success" v-if="item.reordStatus==1">出币成功</text>
												<text v-else class="coin-failure">出币失败</text>
											</text>
											<text v-else>
												<text class="coin-success" v-if="item.reordStatus==1">成功</text>
												<text v-else class="coin-failure">失败</text>
											</text>
										</text>
									</view>
								</view>
								<view v-if="(item.mchType == orderMchTypeEnum.OWNED_MERCHANT 
									|| item.mchType == orderMchTypeEnum.PLATFORM_MERCHANT 
									|| item.mchType == orderMchTypeEnum.CASH_COLLECTION
									|| item.mchType == orderMchTypeEnum.BALANCE_PAYMENT
									|| item.mchType == orderMchTypeEnum.OFFLINE_COLLECTION_CODE
									) 
									&& (item.status == 1 || item.status == 9)">
									<u-button text="点击退款"
										:customStyle="{fontSize: '20rpx',width: '144rpx',height: '60rpx',borderRadius: '30rpx', backgroundColor:'rgb(234, 8, 8)', color: '#fff'}"
										@click="showReund(item.outTradeNo,index)" />
								</view>
							</view>
							<view class="information-bar">
								<view class="information-title">备注信息：</view>
								<view @click="showRemarkModal(item,index)">
									<image class="image-24" :src="`${staticFileUrl}/image/order/notes.png`"></image>
								</view>
								<view class="information-text hide" style="width: 400rpx;">
									{{item.remark?item.remark:''}}
								</view>
							</view>
						</view>
						<view class="user-information-box" v-if="item.memberId">
							<view class="user-box">
								<u-avatar shape="circle" :src="item.headImgUrl"></u-avatar>
								<view class="user">
									<view class="information-text margin-bottom">
										{{item.nickName?item.nickName:'用户未提供姓名'}}
									</view>
									<view class="user-right-box">
										<view class="margin-bottom information-text">ID:
											<text class="information-text">{{item.memberId}}</text>
											<text class="male" v-if="item.sex === 0">男</text>
											<text v-else-if="item.sex===1" class="female">女</text>
											<text class="keep-secret" v-else-if="item.sex==2">保密</text>
											<text class="keep-secret" v-else>未知</text>
										</view>
									</view>
									<view class="information-text phone-number-box">
										<view @click="dialNumber(item.mobile)" v-if="item.mobile"
											class="phone-number-box">
											<text style="width:65rpx;">手机:</text>
											<text class="information-text"
												style="color: #6072FF;">{{item.mobile}}</text>
											<u-icon name="arrow-right" color="#2979ff" size="26rpx"></u-icon>
										</view>
										<text v-else class="text-24">
											手机:用户未提供
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="loadStatus" height="70rpx" line=true>
					</u-loadmore>
				</template>
				<view v-else>
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</view>

			</scroll-view>

		</view>
		<!--		<u-overlay :show="searchMoreShow" zIndex="10"></u-overlay>-->
		<u-popup :show="refundPopupShow" mode="center" :customStyle="{width: '600rpx', padding: '34rpx 54rpx'}"
			round="20rpx" :safeAreaInsetBottom="false" :closeable="true" @touchmove.stop.prevent="moveHandle"
			@close="refundPopupShow=false">
			<view class="content">
				<view class="title">确认退款</view>

				<view class="form">
					<u--form labelPosition="left" :model="form" :rules="rules" ref="form1"
						:labelStyle="{fontSize:'28rpx', color: 'rgba(0, 0, 0, 0.7)', padding: '18rpx 0'}">
						<u-form-item v-if="returnOfGoods" label="退回商品" prop="operatePassword" labelWidth="70">
							<text v-if="returnOfGoodsList.length != 0">
								<template v-for="(item,index) in returnOfGoodsList">
									{{index===0?item.name +'X'+ item.num:'，'+item.name +'X'+ item.num}}
								</template>
							</text>
							<text v-if="returnOfGoodsList.length === 0">无</text>
						</u-form-item>

						<u-form-item label="退款原因" prop="refundReason" labelWidth="70" required>
							<u--textarea v-model="form.refundReason" placeholder="请输入退款原因" :autoHeight="true"
								border="bottom" maxlength="255" placeholderClass="textarea-placeholder" />
						</u-form-item>

					</u--form>
				</view>

				<view class="u-flex-row u-row-around u-m-t-50">
					<u-button type="default" :plain="true" :hairline="true" text="取消" :customStyle="cancelCustomStyle"
						@click="refundPopupShow=false" />
					<u-button type="primary" :plain="true" :hairline="true" text="确认退款"
						:customStyle="confirmCustomStyle" @click="submitRefund" />
				</view>
			</view>
		</u-popup>
		<u-modal :show="refundPolicyShow" title="商品退款规则" confirmText="知道了"
			@confirm="refundPolicyShow=false,refundPopupShow=true">
			<view style="width: 100%;line-height: 38rpx;">
				<view class="u-m-b-20">
					<view class="u-font-28">1.套票</view>
					<view class="u-m-l-20 refund-rules-text">该订单所有套票将过期</view>
				</view>
				<view class="u-m-b-20">
					<view class="u-font-28">2.售货机商品：</view>
					<view class="u-font-26 u-m-l-20 refund-rules-text">不进行货道补库存,新增商品退款库存记录</view>
				</view>
				<view class="u-m-b-20">
					<view class="u-font-28">3.游戏币、人民币余额：</view>
					<view class="u-m-l-20 refund-rules-text">扣减对应余额,如不够扣减则扣除全部剩余</view>
				</view>
			</view>
		</u-modal>
		<u-modal :show="showRemark" title="修改备注" @confirm="saveNotes()" :showCancelButton="true" confirmText="保存"
			@cancel="cancelModification">
			<u--textarea v-model="remark" maxlength="50" placeholder="请输入备注内容" autoHeight></u--textarea>
		</u-modal>
	</view>
</template>

<script>
	import store from '../../../components/store/store.vue'
	import deviceLinkage from '../../../components/device-linkage/device-linkage.vue';
	export default {
		components: {
			store,
			deviceLinkage,
		},
		props: {
			// 父组件tabs的高度
			tabsHeight: {
				type: [Number, String],
				default: 0
			},
			headerHeight: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				$deviceTypeEnum: this.$deviceTypeEnum,
				orderId: '',
				remark: '',
				showRemark: false,
				remarkIndex: 0,
				staticFileUrl: this.$configPath.staticFileUrl,
				downIcon: this.$configPath.staticFileUrl + '/image/home/down.png',
				orderList: [],
				//请求参数
				params: {
					merchantStoreId: '-1',
					deviceNo: '-1',
					memberId: '-1',
					coinType: '-1',
					// status: null,
					orderStatusArray: [1, 6, 7, 8],
					endTime: '',
					startTime: '',
					tabsMenuCurrent: 0,
					keyword: '',
					pageNum: 1,
					totalPage: 1,

				},
				height: 0, //列表高度
				loadStatus: 'nomore', //列表底部加载更多状态
				statistic: {
					turnover: 0,
					turnoverOnLine: 0,
					turnoverOffline: 0,
					refundTotalAmount: 0,
				},
				refundPopupShow: false,
				refundIndex: -1,
				form: {
					refundReason: '',
					outTradeNo: '',
				},
				rules: {
					'refundReason': {
						type: 'string',
						required: true,
						message: '请输入退款原因',
						min: 1,
						max: 255,
						trigger: ['blur'],
					},
				},
				confirmCustomStyle: {
					fontSize: '26rpx',
					width: '232rpx',
					height: '72rpx',
					borderRadius: '36rpx'
				},
				cancelCustomStyle: {
					border: '1rpx solid rgb(224, 224, 224)',
					fontSize: '26rpx',
					color: 'rgb(193,191,191)',
					width: '232rpx',
					height: '72rpx',
					borderRadius: '36rpx'
				},
				orderStatusEnum: this.$orderStatusEnum,
				orderShipmentStatusEnum: this.$orderShipmentStatusEnum,
				deviceTypeEnum: this.$deviceTypeEnum,
				channelTypeEnum: this.$channelTypeEnum,
				dateTimeFormat: 'yyyy-mm-dd hh:MM:ss',
				welfare: {

				},
				orderMchTypeEnum: this.$orderMchTypeEnum,
				//是否退商品开关
				returnOfGoods: false,
				//退的商品集合
				returnOfGoodsList: [],
				//退款规则是否显示
				refundPolicyShow: false,
			};
		},
		methods: {
			returnOfGoodsSwitch() {
				if (this.returnOfGoods && uni.$u.test.isEmpty(this.returnOfGoodsList)) {
					uni.showLoading({
						title: '获取商品中...',
						mask: true
					})
					this.$api('order.findReturnedItems', {
						'orderId': this.orderList[this.refundIndex].id
					}).then(res => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						if (res.status == 0) {
							if (!uni.$u.test.isEmpty(res.data)) {
								this.returnOfGoodsList = res.data;
							}
						} else {
							getApp().err(res.msg);
						}
					})
				}
			},
			Ready() {
				
			},
			//监听页面加载,登录后会调起
			Load(options) {
				//筛选这里赋值查询
				if (options.data) {
					this.params = options.data
					// console.log('普通订单有参数',options.data)
				}else if(options && Object.keys(options).length > 0){
          this.params.keyword = options.outTradeNo
          this.params.startTime =  uni.$u.timeFormat(Date.parse(options.startTime), this.dateTimeFormat);
          this.params.endTime =  uni.$u.timeFormat(Date.parse(options.startTime), this.dateTimeFormat);
          this.params.comprehensiveConditionId = 1 //默认是综合条件
          this.params.tabsMenuCurrent = options.tabsMenuCurrent

          if(options.memberId){
            //会员搜索半年数据
            this.params.keyword = options.memberId
            this.params.startTime = options.startTime;
            this.params.endTime = options.endTime;
            this.params.comprehensiveConditionId = 2
          }
          console.log('opskfs',options)
        } else {
					//当天开始时间
					this.params.startTime = uni.$u.timeFormat(this.$date.getStartDate(), this.dateTimeFormat);
					//当天结束时间
					this.params.endTime = uni.$u.timeFormat(this.$date.getEndDate(), this.dateTimeFormat);
					// console.log('普通订单没参数',options.data)
				}
				this.load();
			},
			PullDownRefresh() {
				this.params.keyword = '';
				this.load();
			},
			navOrderInfo(orderId) {
				// console.log("进入了吗", orderId)
				uni.navigateTo({
					url: './order-item?orderId=' + orderId
				})
			},
			tabsMenuCurrentIndexAndParams(tabsMenuCurrent, params) {
        // this.params = params.data
				this.params.tabsMenuCurrent = tabsMenuCurrent;
        console.log(this.params.tabsMenuCurrent,'坐标')
				console.log(params.data,'切换参数')
				this.load()
			},
			cancelModification() {
				this.remark = '';
				this.showRemark = false;
			},
			dialNumber(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile
				});
			},
			showRemarkModal(item, index) {
				this.remark = item.remark;
				this.orderId = item.id;
				this.showRemark = true;
				this.remarkIndex = index;
			},
			saveNotes() {
				let parameter = {
					id: this.orderId,
					remark: this.remark ? this.remark : '',
				}
				this.$api('order.updateRemark', parameter).then(res => {
					uni.hideLoading();
					if (res.status == 0) {
						this.orderList[this.remarkIndex].remark = this.remark ? this.remark : '';
						this.showRemark = false;
						this.remark = '';
					} else {
						getApp().err(res.msg);
					}
				})
			},
			submitRefund() {
				this.$refs.form1.validate().then(res => {
					uni.showLoading({
						title: '申请退款...',
						mask: true
					});
					if (this.$u.test.isEmpty(this.form.refundReason)) {
						uni.hideLoading();
						getApp().err('请输入退款原因');
						return;
					}
					let body = {
						outTradeNo: this.form.outTradeNo,
						refundReason: this.form.refundReason,
						returnOfGoods: this.returnOfGoods,
					}
					this.$api('orderRefund.refund', body).then(res => {
						uni.hideLoading();
						if (res.status == 0) {
							this.refundPopupShow = false;
							this.form.refundReason = '';
							this.$helpers.toast("操作成功", 'success', 3000, true, () => {
								this.findOneOrderByOutTradeNo(this.form.outTradeNo);
							});
						} else {
							getApp().err(res.msg);
						}
					})
				}).catch(error => {
					getApp().err('请按红色文字提示输入完整信息')
				})
			},
			findOneOrderByOutTradeNo(outTradeNo) {

				if (this.$u.test.isEmpty(outTradeNo)) {
					getApp().err("订单号飞到太空去啦");
					return
				}

				let body = {
					outTradeNo: outTradeNo
				}
				this.$api('order.findOneOrderByOutTradeNo', body).then(res => {
					if (res.status == 0) {
						this.orderList[this.refundIndex] = res.data;
					} else {
						getApp().err(res.msg);
					}

				})
			},
			navRemoteStart(deviceTypeId, equipmentNumber) {
				uni.navigateTo({
					url: '/pages-other/remote-start/remote-start?deviceTypeId=' + deviceTypeId +
						'&equipmentNumber=' + equipmentNumber
				})
			},
			//退款弹框
			showReund(outTradeNo, index) {
				this.returnOfGoodsList = [];
				this.returnOfGoods = false;
				this.form.outTradeNo = outTradeNo;
				this.refundPopupShow = true;
				this.refundIndex = index;
			},
			load() {
				this.orderList = [];
				this.params.pageNum = 1;
				this.params.totalPage = 1;
				//订单列表
				this.findOrderList();
				//统计
				this.findOrderStatisticsByApplet()
			},

			collapseClose() {
				console.log("collapseClose：");
			},
			collapseOpen() {
				console.log("collapseOpen：");
			},

			reachBottom() {
				if (this.params.pageNum >= this.params.totalPage) {
					return;
				}
				this.params.pageNum++;
				// console.log("到底部了:", this.params.pageNum);
				this.loadStatus = 'loading'
				this.findOrderList();
			},
			findOrderList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api('order.findOrderListByApplet', this.params).then(res => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					if (res.status == 0) {
						this.params.pageNum = res.data.pageNum;
						this.params.totalPage = res.data.pages;
						this.loadStatus = res.data.pageNum === res.data.pages ? 'nomore' : 'loadmore';
						if (this.params.totalPage == 0) {
							this.loadStatus = 'nomore';
						}
						this.orderList = [...this.orderList, ...res.data.list]; //合并数组
					} else {
						getApp().err('获取订单数据不成功：' + res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					getApp().err("获取订单数据不成功：" + err.errMsg);
				})
			},
			findOrderStatisticsByApplet() {
				this.$api('order.findOrderStatisticsByApplet', this.params).then(res => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					if (res.status == 0) {
						this.statistic = res.data
					} else {
						getApp().err('获取订单统计数据不成功：' + res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					getApp().err("获取订单统计数据不成功：" + err.errMsg);
				})
			},
			//初始化统计数据
			initializationStatistic() {
				this.statistic.successCoin = 0;
				this.statistic.successFactCoin = 0;
				this.statistic.successVirtualCoin = 0;
				this.statistic.anomalyCoin = 0;
				this.statistic.anomalyFactCoin = 0;
				this.statistic.anomalyVirtualCoin = 0;
			},
			nvaToCoin(item) {
				let that = this
				uni.switchTab({
					url: '/pages/home/home',
					success() {
						uni.navigateTo({
							url: '/pages/coin/coin?startTime=' + that.params.startTime + '&endTime=' +
								that.params.endTime + '&merchantStoreId=' + item.merchantStoreId +
								'&storeName=' +
								item.storeName + '&deviceNo=' + item.deviceNo +
								'&deviceName=' + item.deviceNo + '号' + item.deviceTypeName +
								'&deviceTypeId=' + item.deviceTypeId
						})
					}
				})
			},
			moveHandle() {},

		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(rgba(236, 245, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #F7F8F7;
	}

	.refund-rules-text {
		color: rgba(0, 0, 0, 0.8);
		font-size: 26rpx;
		letter-spacing: 1rpx;
	}

	.order-status-containers {
		padding: 20rpx 50rpx 0;

		.order-status-box {
			padding: 10rpx 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.order-status-operation {
			display: flex;
			justify-content: space-between;
		}
	}

	.phone-number-box {
		align-items: baseline;
		display: flex;
	}

	.content {
		font-size: $f-base;
		color: rgba(0, 0, 0, 0.8);

		.title {
			font-size: $f-lg;
			color: #000;
			text-align: center;
		}

		.form {
			padding: 50rpx 0;
		}

		.desc-bold {
			font-weight: bold;
		}

		.tips {
			text-align: center;
		}
	}

	.margin-top-30 {
		margin-top: 30rpx !important;
	}

	.text-38 {
		font-size: 38rpx !important;
	}

	.text-30 {
		font-size: 30rpx !important;
	}

	.text-24 {
		font-size: 24rpx !important;
	}

	.rotate-left-180 {
		animation: rotateleft180 0.3s linear both;

		@keyframes rotateleft180 {
			0% {
				transform: rotate(0deg);

			}

			50% {
				transform: rotate(-90deg);
			}

			100% {
				transform: rotate(-180deg);
			}
		}
	}

	.rotate-right-180 {
		animation: rotate180 0.3s linear both;

		@keyframes rotate180 {
			0% {
				transform: rotate(-180deg);
			}

			50% {
				transform: rotate(-90deg);
			}

			100% {
				transform: rotate(0deg);
			}
		}
	}

	.transition-24 {
		transition: 1000ms ease-in-out 0ms;
		transition-property: height;
		transform-origin: 50% 50% 0;
		-webkit-transition: 1000ms ease-in-out 0ms;
		-webkit-transition-property: height;
		-webkit-transform-origin: 50% 50% 0;
	}

	.image-32 {
		width: 32rpx;
		height: 32rpx;
	}

	.image-24 {
		width: 24rpx;
		height: 24rpx;
	}

	.coin-detail {
		font-family: "Microsoft YaHei";

		//.header {
		//
		//	.header-search {
		//		background: linear-gradient(rgba(236, 245, 255, 255) 0%, rgba(236, 245, 255, 255) 100%);
		//		padding: 0 24rpx;
		//		padding-top: 24rpx;
		//		display: flex;
		//		flex-direction: row;
		//		justify-content: space-between;
		//		align-items: center;
		//
		//		position: relative;
		//		z-index: 999;
		//
		//		.search-keyword {
		//			width: 510rpx;
		//		}
		//    .label-text{
		//      color: rgba(13, 13, 13, 0.8);
		//      font-size: 26rpx;
		//      border-right:1rpx solid rgba(0, 0, 0, 0.16);
		//      padding-bottom: 4rpx;
		//      padding-right: 10rpx;
		//    }
		//		.search-more {
		//			display: flex;
		//			flex-direction: row;
		//			align-items: center;
		//			// padding: 10rpx 20rpx;
		//
		//			.search-more-title {
		//				color: rgba(13, 13, 13, 0.9);
		//				font-size: $f-base;
		//				line-height: 40rpx;
		//				margin-right: 27rpx;
		//			}
		//
		//			.down-icon {
		//				height: 10rpx;
		//				width: 17rpx;
		//			}
		//		}
		//	}
		//
		//	.tool-btn {
		//		display: flex;
		//		flex-direction: row;
		//		justify-content: space-around;
		//		width: 100%;
		//		border-top: 1px solid #fafafa;
		//		height: 100rpx;
		//		background: $uni-bg-color;
		//	}
		//
		//	.screening-box {
		//		padding: 26rpx 27rpx 30rpx 79rpx;
		//	}
		//
		//	.search-more-panel {
		//		position: absolute;
		//		background: linear-gradient(rgba(236, 245, 255, 255) 0%, rgba(255, 255, 255, 1) 100%);
		//		z-index: 999;
		//		width: 100vw;
		//
		//		.u-form-item__body__left__content__label {
		//			color: rgba(13, 13, 13, 0.7);
		//			font-size: $f-base;
		//			line-height: 40rpx;
		//		}
		//	}
		//
		//
		//}

		.information-title {
			color: rgba(0, 0, 0, 0.6);
			font-size: 28rpx;
		}

		.coin-order-list {
			margin: 0 24rpx;
			margin-top: 20rpx;

			.header-statistical {
				margin: 0 0 26rpx 0;
				padding: 28rpx;
				background: rgb(96, 114, 255);
				border-radius: 20rpx;
				color: #FFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;

				.sub-title {
					color: rgba(255, 255, 255, 0.9);
					font-size: 20rpx;
					line-height: 34rpx;
					text-align: center;
				}

				.turnover {
					color: rgb(255, 255, 255);
					font-family: "OPPOSans";
					font-size: 32rpx;
					line-height: 34rpx;
					margin-top: 7rpx;
					text-align: center;
				}

				.exception-number {
					border: 1rpx solid rgba(255, 255, 255, 0.7);
					border-radius: 60rpx;
					color: rgba(255, 255, 255, 0.9);
					font-size: 22rpx;
					line-height: 34rpx;
					margin-top: 32rpx;
					padding: 0 20rpx;
					text-align: center;
				}

				.exception-number-not {
					height: 70rpx;
				}
			}

			.coin-order-item {
				background: $uni-bg-color;
				border-radius: 20rpx;
				padding: 30rpx;
				line-height: 34rpx;
				margin-bottom: 20rpx;

				.user-information-box {
					padding: 24rpx 16rpx;
					margin-top: 24rpx;
					width: 615rpx;
					height: 149rpx;
					background: rgba(63, 120, 254, 0.1);
					border-radius: 12rpx;



					.distribution-text {
						color: rgb(96, 114, 255);
						font-size: 18rpx;
					}

					.margin-bottom {
						margin-bottom: 15rpx;
					}

					.user {
						margin-left: 7rpx;
						width: 100%;

						.male {
							font-size: 26rpx;
							color: #6072FF;
							margin-left: 13rpx;
						}

						.keep-secret {
							margin-left: 9rpx;
							color: rgb(170, 0, 0);
							font-size: 24rpx;
						}

						.female {
							font-size: 26rpx;
							color: #FF4D94;
							margin-left: 13rpx;
						}
					}

					.user-right-box {
						justify-content: space-between;
						align-items: baseline;
						display: flex;

						.distribution-container {
							width: 50%;
							justify-content: space-between;
							display: flex;

							.details-box {
								display: flex;
								align-items: center;
							}

							.distribution {
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 5rpx 15rpx;
								box-sizing: border-box;
								border: 1rpx solid rgb(96, 114, 255);
								border-radius: 30rpx;

							}
						}
					}

					.user-box {
						display: flex;
						align-items: center;
					}

				}

				.left-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.details {
					display: flex;
					align-content: center;
					justify-content: center;
					margin-top: 25rpx;
				}

				.order-time-box {
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.price {
						margin-left: 12rpx;
					}
				}

				.start-button-text {
					color: rgb(255, 255, 255);
				}

				.color-6072FF {
					background: #6072FF !important;
				}

				.payment-successful {
					margin-right: 14rpx;
					padding: 3rpx 9rpx;
					color: #FFFFFF;
					height: 30rpx;
					background: rgb(0, 187, 156);
					border-radius: 22rpx;
				}

				.coin-success {
					padding: 3rpx 9rpx;
					color: #00BB9C;
					height: 30rpx;
					box-sizing: border-box;
					border: 1rpx solid rgb(0, 187, 156);
					border-radius: 22rpx;
					margin-right: 20rpx;
				}

				.coin-color-orange {
					color: #FF7905 !important;
					border: 1rpx solid rgb(255, 121, 5) !important;
				}

				.coin-failure {
					padding: 3rpx 9rpx;
					color: #FF0000;
					height: 40rpx;
					box-sizing: border-box;
					border: 1rpx solid rgb(255, 0, 0);
					border-radius: 22rpx;
					margin-right: 20rpx;
				}

				.hide {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.information-text {
					color: rgba(0, 0, 0, 0.6);
					font-size: 24rpx;
					margin-left: 11rpx;
					flex: 1;

					.item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						.item-name {
							// 强制换行
							word-wrap: break-word;
							// 强制英文单词换行
							word-break: break-word;
							width: 240rpx;
						}

						.item-count {
							margin-right: 20rpx;
						}
					}

					.item:last-child {
						margin-bottom: 0;
					}
				}

				.information-bar {

					margin-top: 20rpx;
					display: flex;
					align-items: center;
				}

				.information-bar-item {
					align-items: flex-start;
				}

				.order-info {
					color: rgba(0, 0, 0, 0.92);
					font-size: $f-base;
				}

				.coin-number-info {
					color: rgba(0, 0, 0, 0.7);
					font-size: 24rpx;
					margin-top: 39rpx;
					display: flex;
					justify-content: space-between;

					.coin-number {
						color: rgb(0, 0, 0);
						font-family: "OPPOSans";
						font-size: $f-lg;
						margin-right: 12rpx;
					}

					.member-id {
						color: rgb(0, 0, 0);
					}
				}

				.other-info2 {
					display: flex;
					flex-direction: row-reverse;
					// justify-content: space-between;
					margin-top: 27rpx;
					font-size: $f-base;
					color: rgba(0, 0, 0, 0.7);

				}

				.other-info {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 27rpx;

					.order-state {
						font-size: $f-base;
					}

					.order-time {
						color: rgba(0, 0, 0, 0.5);
						font-size: $f-base;
					}

				}
			}
		}

	}
</style>
